<template>
  <div>
    <cu-nav
      centerText="图片展示"
      colorIcon="#fff"
      colorText="#fff"
      :leftArrow="true"
      :fixed="true"
      background="#e8443d"
      :border="true"
      @click-left="chickLeft"
    ></cu-nav>

    <div class="img-cont">
      <img-show
        :pics="pics"
        :maxLength="9"
        :cuStyle="{width:320,singleWidth:100,singleHeight:100}"
        type="more"
      ></img-show>
    </div>
    <div class="img-tools">
      <div class="title">pics</div>
      <div class="desp">图片list</div>
    </div>
    <div class="img-tools">
      <div class="title">maxLength</div>
      <div class="desp">显示图片张数，参数有1，6，9三种</div>
    </div>
    <div class="img-tools">
      <div class="title">type</div>
      <div class="desp">最后一张图片是否显示“查看全部”，参数more为显示</div>
    </div>
    <div class="img-tools">
      <div class="title">cuStyle</div>
      <div class="desp">图片组件内样式设置</div>
      <div class="desp">参数如下：</div>
      <div class="desp-block">width： 外盒子宽度</div>
      <div class="desp-block">singleWidth： 每张图片宽度</div>
      <div class="desp-block">singleHeight： 每张图片高度</div>
    </div>
  </div>
</template>

<script>
import CuNav from "@/components/custom-model/cu-nav";
import imgShow from "@/components/custom-model/image/img-show";

import Vue from "vue";
import { RadioGroup, Radio } from "vant";
Vue.use(Radio).use(RadioGroup);

export default {
  components: {
    "cu-nav": CuNav,
    "img-show": imgShow
  },
  data() {
    return {
      pics: [],
      radio: 1,
      maxLength: 1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    chickLeft(e) {
      this.$router.go(-1);
    },
    change(val) {
      console.log(val);
      this.maxLength = val;
      this.getData();

      this.$forceUpdate();
    },
    getData() {
      for (let i = 0; i < 15; i++) {
        this.pics.push(
          "https://portrait.gitee.com/uploads/avatars/user/546/1639152_WoRuoYiRuFeng_1578956600.png!avatar200"
        );
      }
    }
  }
};
</script>


<style lang="less" scoped>
.view-router {
  width: 100%;
  min-height: 100vh;
//   background: #fff;
}
.img-cont {
  width: 320px;
  margin: 0 auto;
}
.img-tools {
  width: 100%;
  padding: 10px 15px;
  background: #fff;
  margin-bottom: 10px;
  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
  .desp {
    width: 100%;
    // height: 20px;
    line-height: 20px;
    font-size: 14px;
    padding-left: 20px;
  }
  .desp-block {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    padding-left: 40px;
  }
}
</style>